
import React from 'react';
import { Icon, Divider, Button, Upload,Tabs,Table,Input,message,Radio,Modal,Spin,Pagination,Select} from 'antd'
import {BaseUrl} from '../../components/common/common';
import { Link } from 'react-router-dom'
const { Search } = Input;
const { Column } = Table;
const Option = Select.Option;
const TabPane = Tabs.TabPane;
var imginfo = [];
let randomColor =[];
class AddBatch extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            labeledimg:null,
            sourceimg:null,
            uploadFile: false,
            isModalVisible: false,
            isComfirmDetect:false,
            isComfirmNotDetect:false,
            isDisable:true,
            process:0,
            code:false,
            message:'',
            imageUrl:null,
            loading: false,
            shelfnum:null,
            product:[],
            statistics:null,
            unknown:null,
            displayresult:null,
            blur_result:null,
            shelf_blur_result:null,
            brightness_result:null,
            unknown:0,
            number:null,
            disnum:null,
            disshelf:null,
            flag:[],
            hasmore:true,
            visible:false,
            visible2:false,
            imgType:true,
            imgHeight:'0',
            imgWidth:'0',
            type:null,
            next:null,
            prev:null,
            coor_list:[],
            nowindex:null,
            taskid:null,
            img_type:null,
            x:null,
            y:null,
            w:null,
            h:null,
            onlineserve:true,
            cHeight:0,
            cWidth:0,
            skucoor:null,
            imginfo:null,
            datas:[],
            isModifiedModalVisible:false,
            isAddNewSKUvisible:false,
            isRepeatSKUvisible:false,
            total:0,
            limit:5,
            isAdding:false,
            current:1,
            flag:false,
            shape:"瓶装",
            is_product:true,
            cate:"acidbacteria",
            is_canvas_:"none",
            is_canvas:"block",
            seach_name:'',
            selectedRowKeys: [],
            previewImage: '',
            files: [],
            fileList: [],
            file:[],
            imgUrl:[]
        };
        this.zoom =1
    }

    showModal = () => {
        this.setState({
            isModalVisible: true,
        });
    };
    previous_page() {
        let offset = this.state.offset - this.state.limit;
        if (offset >= 0) {
            this.setState({offset: offset}, () => {
                this.searchSKU_()
            });
        } else {
            this.setState({offset: 0}, () => {
                this.searchSKU_()
            });
        }
    }

    next_page() {

        let offset = this.state.offset + this.state.limit;
        this.setState({offset: offset}, () => {
            this.searchSKU_()
        });

    }
    hideModal = () => {
        this.setState({
            isModalVisible: false,
        });
    };
    unique = (arr1) => {
      const res = new Map();
      var arr = arr1.filter((a) => !res.has(a.name) && res.set(a.name, 1));
      this.setState({
        each_sku:arr
      },()=>{
        let product = this.state.each_sku;
        for(const key in product){
            product[key]["key"]= parseInt(key) + 1;
        }
        this.setState({
            product:product,
        },()=>{
            this.onSelectAll()
        })
      })

   };
    detectImage =()=> {
      if(!this.state.imgUrlUpload){
        message.warn("图片还未上传完成！");
        return;
      }
      this.setState({
        flags:true
    });
    const token = window.localStorage.getItem("token");
    const url =  BaseUrl + this.props.URL_SON + window.localStorage.getItem("verifyId") + "?source_type=model_verified";
    const options = {
        method: 'POST',
        mode:'cors',
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json',
            'Authorization':token
        },
    };
    fetch(url, {
        ...options, body: JSON.stringify({
          image_url: this.state.imgUrlUpload,
          width:imginfo[0],
          height:imginfo[1],
        }),
    }).then(response => response.json()).then(result =>{
        if(result.code == 200){
                var skucoor = result.data.each_sku;
               for(var i =0; i < skucoor.length;i++){
                  skucoor[i].sku_coor =  skucoor[i].sku_coordinate;
                  skucoor[i].sku_dig =  skucoor[i].sku_confidence[0].top1;
                  for(var j =0;j <  skucoor[i].sku_confidence[0].top1.length;j++){
                     skucoor[i].sku_dig =  skucoor[i].sku_confidence[0].top1[j]
                  }
                  skucoor[i].sku_name =  skucoor[i].name;
               } 
                this.setState({
                  flags:false,
                  onlineserve:false,
                  each_sku: result.data.each_sku,
                  skucoor:skucoor,
                  is_normal_shelf:result.data.is_normal_shelf,
                  is_normal_shelf_confidence: result.data.is_normal_shelf_confidence,
                  is_normal_shelf_coordinate: result.data.is_normal_shelf_coordinate,
                  statistics: result.data.statistics,
                  unknown:result.data.unknown
                },()=>{
                    Modal.info({
                        title: '提示',
                        content: (
                            <div>
                                <p style={{textAlign:'center',zIndex:'99999'}}>识别成功</p>
                            </div>
                        ),
                        onOk() {},
                    });
                     this.unique(this.state.each_sku)
                });
        }
        else{
            this.setState({
                flags:false
            });
            Modal.info({
                title: '提示',
                content: (
                    <div>
                        <p>{result.detail}</p>
                    </div>
                ),
                onOk() {},
            });

        }
    }).catch(error => {
        this.setState({
            flags:false
        });
        // Modal.info({
        //     title: '提示',
        //     content: (
        //         <div>
        //             <p>请求失败</p>
        //         </div>
        //     ),
        //     onOk(){},
        // });
        console.info('detect error', error);
    });
    };
   

    componentDidMount =()=>{
         randomColor = JSON.parse(window.sessionStorage.getItem("randomColor"));
        let  server_type =  this.props.TYPE;
        this.setState({
            server_type:server_type
        });
        console.log("testtype",server_type);
        if(this.props.TYPE == "服务"){
           
            this.setState({
                sourceimg: window.localStorage.getItem("detailImg")
            });
            this.online_server()
        }else{
        }

    };
    online_server=()=>{
        // var id = window.localStorage.getItem("detailId")
        console.log("detailId",window.localStorage.getItem("detailId") );
        const token = window.localStorage.getItem("token");
        const log_id =  this.props.logid;
        this.setState({
            log_id:log_id,
            token:token
        });
        const url =  BaseUrl + this.props.URL_SON + window.localStorage.getItem("detailId") ;
        const options = {
            method: 'GET',
            mode:'cors',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json',
                "Authorization":token
            },
        };
        fetch(url, {
            ...options
        }).then(response => response.json()).then(result =>{

            if(result.code == 200){
              var skucoor = result.data.each_sku;
              for(var i =0; i < skucoor.length;i++){
                 skucoor[i].sku_coor =  skucoor[i].sku_coordinate;
                 skucoor[i].sku_dig =  skucoor[i].sku_confidence[0].top1;
                 for(var j =0;j <  skucoor[i].sku_confidence[0].top1.length;j++){
                    skucoor[i].sku_dig =  skucoor[i].sku_confidence[0].top1[j]
                 }
                 skucoor[i].sku_name =  skucoor[i].name;
              } 
               imginfo[0] = result.data.source_img_width;
               imginfo[1] = result.data.source_img_height;
               this.setState({
                 flags:false,
                 onlineserve:false,
                 each_sku: result.data.each_sku,
                 skucoor:skucoor,
                 is_normal_shelf:result.data.is_normal_shelf,
                 is_normal_shelf_confidence: result.data.is_normal_shelf_confidence,
                 is_normal_shelf_coordinate: result.data.is_normal_shelf_coordinate,
                 statistics: result.data.statistics,
                 unknown:result.data.unknown
               },()=>{
                   Modal.info({
                       title: '提示',
                       content: (
                           <div>
                               <p style={{textAlign:'center',zIndex:'99999'}}>识别成功</p>
                           </div>
                       ),
                       onOk() {},
                   });
                    this.unique(this.state.each_sku)

               });
            }else{
              Modal.info({
                title: '提示信息',
                zIndex:1004,
                content: ( <div>{result.detail}</div>),
                onOk() {},
            });
            }
        }).catch(error => {

            console.info('login error', error);
        });
    };

    uploadProcess = () => {
        const token = window.localStorage.getItem("token");
        const taskId = this.props.taskid;
        const url =  BaseUrl + "/api/v1/excelupload_process";
        const options = {
            method: 'POST',
            mode:'cors',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json',
            },
        };
        fetch(url, {
            ...options, body: JSON.stringify({
                "token":token,
                "taskId":taskId,
            }),
        }).then(response => response.json()).then(result =>{
            if(result.code == '4'){
                setTimeout(this.uploadProcess(),1000);

            }
            else if(result.code == '0'){
                setTimeout(() => {
                    this.uploadProcess();
                    this.setState({
                        process: result.process,
                    })
                }, 1000);
            }
            else if(result.code == '1'){
                this.setState({
                    code: result.code,
                    message: result.message,
                    isDisable:false,
                    process:100,
                    //isModalVisible:true
                })
            }
        });
    };

    startUpload = () => {
        const token = window.localStorage.getItem("token");
        const taskId = this.props.taskid;
        const url =  BaseUrl + "/api/v1/startshelf_detect";
        const options = {
            method: 'POST',
            mode:'cors',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json',
            },
        };
        fetch(url, {
            ...options, body: JSON.stringify({
                "token":token,
                "taskId":taskId
            }),
        }).then(response => response.json()).then(result =>{
            this.setState({
                isModalVisible:false,
                isComfirmDetect:true
            })
        });
    };

    onDelete = () => {
        const token = window.localStorage.getItem("token");
        const taskId = this.props.taskid;
        const url =  BaseUrl + "/api/v1/delete_excel";
        const options = {
            method: 'POST',
            mode:'cors',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json',
            },
        };
        if(taskId === null){
            this.setState({
                isComfirmNotDetect:true
            });
            return;
        }
        fetch(url, {
            ...options, body: JSON.stringify({
                "token":token,
                "taskId":taskId,
            }),
        }).then(response => response.json()).then(result =>{
            if(result.code !== '201'){
                message.success('deleted!');
                this.setState({
                    isModalVisible: false,
                    uploadFile:false,
                    isComfirmNotDetect:true
                });
                console.log(result);
            }else{
                this.setState({
                    isComfirmNotDetect:true
                })
            }
        });
    };


    handleChange = (file) => {
        let reader = new FileReader();
        reader.readAsDataURL(file.file.originFileObj);
        reader.onload = () => {
            this.setState({
                imageUrl:reader.result,
            })
        };
    };
    showProduct(){
        let skus = this.state.product;
        let data =null;
        for(let i=0; i<skus.length; i++)
        {
            data =<div style={{height:"100%"}}>
                <div  style={{ width:"100%",textAlign:"left",padding:"0",fontSize:'18px'}}><h7>各商品占检测占比:</h7></div>
                <div style={{height:'650px',overflow:'auto'}} >
                    {
                        skus.map((info,i)=>
                            <div className="sukinfos" key={i}>
                                <div style={{ width:"15%"}}>{1+i}</div>
                                <div style={{ width:"55%"}}>{info.name}</div>
                                <div style={{ width:"15%"}}>{info.quantity}个</div>
                                <div style={{ width:"15%"}}>{Math.floor((info.quantity/this.state.statistics) * 100)}%</div>
                            </div>
                        )
                    }
                </div>
            </div>

        }
        return data;
    }
    getposition = (event)=>{
        var real_size = document.getElementById('shizai');
        this.setState({
            real_size:real_size.width
        },()=>{
            console.log("原图",this.state.real_size)
        });
        const token = window.localStorage.getItem("token");
        let canves=document.getElementById("canves");
        var x = (event.clientX - canves.getBoundingClientRect().left);
        var  y = (event.clientY - canves.getBoundingClientRect().top);
        this.setState({
            x_:x,
            y_:y
        });
        var img = document.getElementById('imgdisplay');
        x = x*(real_size.width/img.width);
        y = y*(real_size.height/img.height);
        var coorlist = '';
        this.setState({
            mask:false,
            sku_dig:"",
            // sku_search_name:""
        });
        for(var i = 0;i < this.state.coor_list.length; i++){

            // if( parseInt(this.state.coor_list[i].sku_coor[0])< parseInt(x) < parseInt(this.state.coor_list[i].sku_coor[2]) &&  parseInt(this.state.coor_list[i].sku_coor[1])< parseInt(y) < parseInt(this.state.coor_list[i].sku_coor[3])){
            if(this.state.server_type == "服务") {
                if (parseInt(this.state.coor_list[i].sku_coor[0]) < parseInt(x) && parseInt(x) < parseInt(this.state.coor_list[i].sku_coor[2])) {
                    if (parseInt(this.state.coor_list[i].sku_coor[1]) < parseInt(y) && parseInt(y) < parseInt(this.state.coor_list[i].sku_coor[3])) {

                        coorlist = this.state.coor_list[i].sku_coor;
                        console.log("发送到后台的坐标", coorlist);
                        var sku_dig = this.state.coor_list[i].sku_dig;
                        this.state.sku_search_name = this.state.coor_list[i].sku_name;

                        if (sku_dig != undefined) {
                            this.setState({
                                mask: true,
                                sku_dig: sku_dig,
                                sku_search_name: this.state.sku_search_name
                            }, () => {

                            })
                        }
                        this.setState({
                            coorlist: coorlist
                        });


                        if (coorlist != '') {
                            return;
                        }
                    }
                }
            }else{

            }
        }
        const   url =  BaseUrl + "/sku/crop_sku" ;
        const   options = {
            method: 'POST',
            mode:'cors',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json',
            },
        };
        fetch(url, {
            ...options, body: JSON.stringify({
                "token":token,
                "apiuselog_id":this.state.apiuselog_id,
                "coordinate":this.state.coorlist,
            }),
        }).then(response => response.json()).then(result =>{
            if(result.code == '2002'){
                message.warn("暂无更多数据");
                return ;
            }
            if(result){
                let product = result["each_sku"];
                for(const key in product){
                    product[key]["key"]= parseInt(key) + 1;
                }
                this.setState({

                })
            }
        }).catch(error => {
            console.info('  login error', error);
        });

    };
    clearData = () => {
        this.setState({ selectedRowKeys: [] });
    };
    sku_update=(e)=>{
        this.clearData();
        this.setState({
            is_canvas_:"none",
            flag:true,
            is_canvas:"none",
            select_sku_name:''
        },()=>{
            e.preventDefault();
            const token = window.localStorage.getItem("token");
            const url =  BaseUrl + "/sku/cropped_sku_image?sku_coordinate="  +this.state.coorlist[0]+"&sku_coordinate="+ this.state.coorlist[1]+"&sku_coordinate="+ this.state.coorlist[2]+"&sku_coordinate="+ this.state.coorlist[3]+"&log_id="+ this.state.log_id;
            fetch(url,{
                method: 'GET',
                headers: {
                    'Accept': 'application/json, text/plain, */*',
                    'Content-Type': 'application/json',
                    "token":token
                },
            })
                .then(response => response.json()).then(result =>{

                if(result){

                    this.setState({
                        result_base64_image:result.result_base64_image,
                        isModifiedModalVisible:true,
                        is_canvas_:"none",
                        flag:false
                    });
                    this.searchSKU();
                    return false;
                }
            })
                .catch((error) => {
                    alert(error)
                })
        })


    };
    zoomOut = (e) => {
        console.log(this.zoom);
        var img = document.getElementById('imgdisplay');
        const canves=document.getElementById('canves');
        const imgHeight = img.height;
        const imgWidth = img.width;
        const cHeight =  canves.height;
        const cWidth =  canves.width;
        if(this.zoom>=1){
            const height = parseInt(imgHeight) - 100;
            const width = parseInt(imgWidth) - 100;
            const cheight = parseInt(cHeight) -100;
            const cwidth = parseInt(cWidth) - 100;
            this.setState({
                imgWidth: `${width}px`,
                imgHeight: `${height}px`,
                cWidth: `${cwidth}`,
                cHeight: `${cheight}`
            });
            this.zoom = this.zoom-0.1;
            this.onSelectAll()
        }

    };

    zoomIn = (e) => {
        console.log(this.zoom);
        const img = document.getElementById('imgdisplay');
        const canves=document.getElementById('canves');
        const imgHeight = img.height;
        const imgWidth = img.width;
        const cHeight =  canves.height;
        const cWidth =  canves.width;
        if(this.zoom<=1.5){

            const height = parseInt(imgHeight) + 100;
            const width = parseInt(imgWidth) + 100;
            const cheight = parseInt(cHeight) + 100;
            const cwidth = parseInt(cWidth) + 100;
            this.setState({
                imgWidth: `${width}px`,
                imgHeight: `${height}px`,
                cWidth: `${cwidth}`,
                cHeight: `${cheight}`
            });
            this.zoom += 0.1;
            this.onSelectAll()
        }
    };

    changeImgType = (e) => {
        this.setState({
            imgType:!this.state.imgType
        },()=>{
            if(e.target.value== "b"){
                this.setState({
                    is_canvas_:"block"
                },()=>{
                    this.onSelectAll()
                })

            }else{
                this.setState({
                    is_canvas_:"none"
                },()=>{
                    this.onSelectAll()
                })
            }
        })
    };
    remindpage (){
        window.localStorage.setItem("recordcount",1);
    }
    randomColor(){
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        return "rgb("+r+","+g+","+b+")";
    }
    frame =()=>{
        let canves =document.getElementById("canves");
        let ctx=canves.getContext("2d");
        if(this.zoom == 1.1){

            canves.width = 400*1.5;
            canves.height = 500*1.5;
        }
        if(this.zoom == 1.2000000000000002){
            canves.width = 600*1.5;
            canves.height = 750*1.5;
        }
        if(this.zoom == 1){
            canves.width = 400;
            canves.height = 500;
        }
        if(this.zoom == 1.3000000000000003){
            canves.width = 900*1.5;
            canves.height = 1125*1.5;
        }
        if(this.zoom == 1.4000000000000004){
            canves.width = 1350*1.5;
            canves.height = 1687*1.5;

        }
        var imgw = imginfo[0];
        var imgh = imginfo[1];
        var img = document.getElementById('imgdisplay');
        var x = parseInt(img.width) / imgw;
        var y = parseInt(img.height)/imgh;
        ctx.clearRect(0,0,1000,1000);
        var t = 0;
        this.state.datas.map((info,index)=>{
            t++;

            info.test.map((val,key) =>
                {
                    var a = val.sku_coor[0] * x;
                    var b = val.sku_coor[1] * y;
                    var c = val.sku_coor[2] * x;
                    var d = val.sku_coor[3] * y;
                    var width = c-a;
                    var height = d-b;
                    if(this.zoom == 1.1){
                    }
                    ctx.lineWidth = 2;
                    if(info.name == "未知" || info.name == "others"  || info.name == "竞品" || info.test[0].sku_name == "未知" || info.test[0].sku_name == "竞品"){
                        ctx.strokeStyle = "#ccc"
                    }else {
                        ctx.strokeStyle = info.color
                    }
                    ctx.lineWidth = 1;
                    ctx.strokeText(t, a, b-5);
                    ctx.lineWidth = 3;
                    ctx.strokeRect(a,b,width,height);
                }
            )

        });

        if(this.state.is_normal_shelf_coordinate != undefined){
            var a_ = this.state.is_normal_shelf_coordinate[1] * x ;
            var b_ = this.state.is_normal_shelf_coordinate[0] * y;
            var c_ = this.state.is_normal_shelf_coordinate[3] * x;
            var d_ = this.state.is_normal_shelf_coordinate[2] * y;
            var width_ = c_-a_;
            var height_ = d_-b_;
            ctx.strokeStyle = "#f21";
            let shelf_type = '';
            if(this.state.is_normal_shelf == "shelf"){
                shelf_type = "正常货架"
            }
            if(this.state.is_normal_shelf == "stack"){
                shelf_type = "堆头"
            }
            if(this.state.is_normal_shelf == "endshlef"){
                shelf_type = "端架"
            }
            if(this.state.is_normal_shelf == "others"){
                shelf_type = "其他货架"
            }
            ctx.strokeStyle = "yellow";
            ctx.lineWidth = 1;
            ctx.strokeText(shelf_type, a_ + 10,b_ +10);
            ctx.lineWidth = 3;
            ctx.strokeRect(a_,b_,width_,height_);

        }



    };
    onSelectChange = (selectedRowKeys,data) => {

        var name=[];
        var datas=[];
        data.map((val)=>
            name.push(val.name)
        );
        for(let i=0;i<name.length;i++){
            var n={};
            var test=[];
            if(this.state.skucoor == undefined){
                return;
            }else{
                this.state.skucoor.map((val2) =>
                {
                    if( val2.sku_name == name[i] || val2[4] == name[i]){
                        test.push(val2);
                    }
                });
                n.test=test;
                n.name= selectedRowKeys[i];
                n.color= randomColor[i];
                datas[i]=n;
            }
        }

        this.setState({
            datas:datas,
        });
        setTimeout(() => {
            this.frame();
        }, 0);
        // this.setState({ selectedRowKeys });
    };
    onSelectAll_(){}
    onSelectAll(){
        var name=[];
        var datas=[];
        if(this.state.product != undefined){
            this.state.product.map((val)=>
                name.push(val.name)
            );
            for(let i=0;i<name.length;i++){
                var n={};
                var test=[];

                this.state.skucoor.map((val2) =>
                {
                    if( val2.sku_name == name[i] || val2[4] == name[i]){
                        test.push(val2);
                    }
                });
                n.test=test;
                n.name= name[i];
                n.color= randomColor[i];
                datas[i]=n;
            }
            for(var i =0; i < this.state.product.length;i++ ){
              this.state.product[i].quantity = datas[i].test.length
            }
            this.setState({
                datas:datas,
                product:this.state.product
            });

            setTimeout(() => {
                this.frame();
            }, 0);

        }else{

        }

    }
    showModal = () => {
        this.setState({
            isModifiedModalVisible: true,
        });
    };
    handleOk = e => {
        console.log(e);
        this.setState({
            is_canvas_:"none",
            flag:true
        });
        const   url =  BaseUrl + "/api/v1/log_detail/" + this.state.log_id + "/sku" ;
        const   options = {
            method: 'PATCH',
            mode:'cors',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json',
                "token":this.state.token,
            },
        };
        fetch(url, {
            ...options, body: JSON.stringify({
                "old_sku_name":this.state.sku_search_name,
                "new_sku_name":this.state.select_sku_name,
                "sku_coordinate":this.state.coorlist
            }),
        }).then(response => response.json()).then(result =>{
            this.setState({
                flag:false,
                is_canvas:"block",
                is_canvas_:'block'
            });
            if(result.code == '2002'){
                message.warn("暂无更多数据");
                return ;
            }
            if(result.code == 200){
                message.warn("sku修改成功");
                this.setState({
                    isModifiedModalVisible: false,
                    is_canvas_:"block",
                    flag:false
                });
                this.delete_sku();
                this.componentDidMount();
            }
        }).catch(error => {
            console.info('  login error', error);
        });

    };

    handleOk3 = e => {
        console.log(e);
        this.setState({
            isRepeatSKUvisible: false,
        });
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            isModifiedModalVisible: false,
            is_canvas_:"block",
            is_canvas:"block"
        });
    };

    handleCancel2 = e => {
        console.log(e);
        this.setState({
            isAddNewSKUvisible: false,
            is_canvas:"block",
            is_canvas_:"block"
        });
    };

    handleCancel3 = e => {
        console.log(e);
        this.setState({
            isRepeatSKUvisible: false,
        });
    };

    openAddNewSKUmodal = () => {
        this.setState({
            isAddNewSKUvisible:true,
            isModifiedModalVisible:false,
            is_canvas_:"none",
            is_canvas:"none"
        });
        console.log(this.state.isModifiedModalVisible);
        console.log(this.state.isAddNewSKUvisible);
    };

    onAddNewSKU = () => {
        this.setState({
            flag:true,

        });
        const taskId = window.localStorage.getItem("taskid");
        const url =  BaseUrl + "/sku/insert";
        const options = {
            method: 'POST',
            mode:'cors',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json',
            },
        };
        var images_sku = [];
        images_sku.push(this.state.result_base64_image);
        this.setState({
            isAddNewSKUvisible: false,
            isAdding:true,
        });

        fetch(url , {
            ...options, body: JSON.stringify({
                // "sku_id":id,
                "name":this.state.name,
                "images":images_sku,
                "brand":this.state.brand,
                "shape":this.state.shape,
                "token":this.state.token,
                "spec":this.state.space,
                "number":this.state.number,
                "unitprice":this.state.price,
                "cate":this.state.cate,
                "is_product":this.state.is_product
            }),
        }).then(response => response.json(
            console.log("response",response)

        )).then(result =>{
            this.setState({
                flag:false,
                flags:false,
                is_canvas_:"block",
                is_canvas:"block"
            });

            if(result.code == '2002'){
                message.warn("暂无更多数据");
                return ;
            }
            if(result.code == '5002'){
                this.setState({
                    flag:false,
                    select_sku_name:this.state.name
                },()=>{
                    this.handleOk()
                });
                Modal.info({
                    title: '提示信息',
                    content:"sku信息上传成功",
                    onOk() {

                    },
                });
            }
            if(result.code == '5001'){

                Modal.info({
                    title: '提示信息',
                    content:"sku被占用",
                    onOk() {

                    },
                });
            }
            if(result.code == '5003'){

                Modal.info({
                    title: '提示信息',
                    content:"sku信息错误",
                    onOk() {

                    },
                });
            }
            if(result.code == '0001'){

                Modal.info({
                    title: '提示信息',
                    content:"参数错误",
                    onOk() {

                    },
                });
            }
            if(result.code == '500'){
                message.warn("加载失败");

            }
        }).catch(error => {
            console.info('  login error', error);
        });
    };

    searchSKU=(value) =>{
        this.setState({
            flag:true,
            seach_name:value
        },()=>{
            const showSign = this.showSign;
            console.log('value: ', value);
            const   url =  BaseUrl + "/sku/select" ;
            const   options = {
                method: 'POST',
                mode:'cors',
                headers: {
                    'Accept': 'application/json, text/plain, */*',
                    'Content-Type': 'application/json',
                },
            };
            fetch(url, {
                ...options, body: JSON.stringify({
                    "token":this.state.token,
                    "limit":this.state.limit,
                    "offset":(this.state.current-1) * this.state.limit,
                    "search_name":this.state.seach_name
                }),
            }).then(response => response.json()).then(result =>{
                this.setState({
                    flag:false
                });
                if(result.code == '2002'){
                    message.warn("暂无更多数据");
                    return ;
                }
                if(result.code == '200'){
                    this.setState({
                        modifyData:result.data.sku_info,
                        total_sku:result.data.total
                    })
                }
                if(result.code == '500'){
                    message.warn("加载失败");

                }
            }).catch(error => {
                console.info('  login error', error);
            });
        })
    };
    searchSKU_=() =>{
        const showSign = this.showSign;
        const   url =  BaseUrl + "/sku/select" ;
        const   options = {
            method: 'POST',
            mode:'cors',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json',
            },
        };
        fetch(url, {
            ...options, body: JSON.stringify({
                "token":this.state.token,
                "limit":this.state.limit,
                "offset":(this.state.current-1) * this.state.limit,
                "search_name":this.state.seach_name
            }),
        }).then(response => response.json()).then(result =>{
            this.setState({
                flag:false
            });
            if(result.code == '2002'){
                message.warn("暂无更多数据");
                return ;
            }
            if(result.code == '200'){
                this.setState({
                    modifyData:result.data.sku_info,
                    total_sku:result.data.total
                })
            }
            if(result.code == '500'){
                message.warn("加载失败");

            }
        }).catch(error => {
            console.info('  login error', error);
        });

    };
    async  onChange_(page){
        console.log(page,this.state.current);
        if(this.state.current - page == 1){
            this.next_page();
            this.setState({
                current:page,
            });
            return ;
        }
        if((this.state.current-page) == -1){
            if(page == 2){
                this.next_page();
            }else{
                this.previous_page();
            }
            this.setState({
                current:page,
            });
            return ;
        }
        if((this.state.current-page) == 0 && this.state.current == 1){
            this.next_page();
            this.setState({
                current:page,
            });
            return ;
        }
        if(Math.abs(this.state.current-page)!=1){
            const offset= (page -1) * this.state.limit;
            await this.setState({
                offset:offset,
                current:page,
            },()=>{
                this.searchSKU_()
            });

        }
    }
    handleChangeProduct =(value)=> {
        if(value == "false"){
            this.setState({
                is_product:false,
            })
        }else{
            this.setState({
                is_product:true,
            })
        }

    };
    delete_sku =()=>{
        const   token = window.localStorage.getItem("token");
        const   url =  BaseUrl + "/sku/update";
        const   options = {
            method: 'POST',
            mode:'cors',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json',
            },
        };
        var images_sku = [];
        images_sku.push(this.state.result_base64_image);
        fetch(url, {
            ...options, body: JSON.stringify({
                "token":token,
                "sku_id":this.state.select_sku_id,
                "images":images_sku
            }),
        }).then(response => response.json()).then(result =>{
            if(result.code == '2002'){
                return ;
            }
            if(result){
                if(result.code == '5011'){
                    return ;
                }
                if(result.code == '5003'){
                    message.warn("请求失败");

                }
            }
        }).catch(error => {
            console.info('  login error', error);
        });
    };
    handleChangeName(event1) {
        this.setState({name: event1.target.value});
    }

    handleChangeNumber(event1) {
        this.setState({number: event1.target.value});
    }
    handleChangeSpace=(event1)=> {
        this.setState({space: event1.target.value});
    };
    handleChangePrice=(event1)=> {
        this.setState({price: event1.target.value});
    };
    handleChangeShape=(value)=> {
        this.setState({shape: value});
    };
    handleChangeSkutype =(value)=> {
        this.setState({
            cate:value,
        })
    };
    handleChangeBrand=(event1)=> {
        this.setState({brand:event1.target.value});
    };

    handleMouseEnter=()=>{
        this.setState({
            is_canvas_:"none"
        })
    };
    handleMouseLeave=()=>{
        this.setState({
            is_canvas_:"block"
        })
    };
    clearCheck = () => { // 处理勾选数据后清空勾选
        this.setState({
            selectedRowKeys: []
        })
    };
    getImg(){
      let imgs = this.state.imgUrl;
      let test=(
                  <span style={{display:'flex',justifyContent:'left',flexWrap:'wrap'}}>
                    {
                      this.state.imgUrl.length > 0 ? 
                      <div>
                          {
                              imgs.map( (val,i) =>
                                  <div key={i} style={{textAlign:'right',margin:'10px'}}>
                                      <img src={val} alt="加载中" width="80px" height="100px" style={{border:'5px solid #ccc',height:'500px',width:'500px',}}    />
                                      <br /><Button  imgid={i} style={{width:'40px',height:'20px',  fontSize:'10px',padding:'0',borderRadius:'0'}}onClick={this.deleteExist.bind(this)} >删除</Button>
                                  </div>
                              )
                          }
                      </div>
                      :
                      <div className="uploadimg">
                          <span onClick={this.addImage} style={{border:'1px solid #ccc',height:'500px',width:'500px',textAlign:'center',lineHeight:'100px',display:'inline-block',margin:'10px'}}>
                                  <input
                                  style={{
                                      display:'none'
                                  }}
                                  ref={(el) => { this.input = el }}
                                  type='file'
                                  accept='image/*'
                                  onChange={this.handleImageChange}
                                  />
                                  {/* <Icon size="large" type="plus" /> */}
                                  <div>
                                    点击选择图片
                                  </div>
                          </span>
                      </div>
                     
                    }
                     
                     
                  </span>
              );
       return test;
  
  }
  deleteExist=(event)=>{
    let key = parseInt(event.target.getAttribute("imgid"));
    let data = this.state.files;
    let data_ = this.state.imgUrl;
    data_.splice(key,1);
    data.splice(key,1);
    this.setState({
        files:data,
        imgUrl:data_
    },()=>{
        console.log("files",this.state.files)
    })
};
handleUpload = () => {
  const { fileList } = this.state;
  const formData = new FormData();
  fileList.forEach(file => {
    // formData.append('files[]', file);
    // this.state.file.push(file)
    console.log("file",file)
  });

  // this.setState({
  //   uploading: true,
  // });

};
handlePreview = file => {
  this.setState({
    previewImage: file.url || file.thumbUrl,
    previewVisible: true,
  });
};

handleChange = ({ fileList }) => {
    console.log(fileList);
    let test =[];
    this.setState({ fileList });
    this.state.fileList.map(val => 
        test.push(val.thumbUrl)
    );
    this.setState({
        data:test,
    })
};
addImage = () => {
  this.input.click();//触发input：file的click事件，
};

handleImageChange = (e) => {//处理图片
  if(e.target.files[0] == undefined){

  }else{
      const saveUrl = this.props.saveUrl;
      const file = e.target.files[0];
      const windowURL = window.URL || window.webkitURL;//实现预览
      const dataURl = windowURL.createObjectURL(file);//
      this.state.imgUrl.push(dataURl);
      this.setState({
        imgUrl: this.state.imgUrl
      });
      let param = new FormData(); //创建form对象

      this.state.files.push(file);

      var oFile= file;

      var reader=new FileReader();

      reader.onload=function(){
          // 也可以用 window.URL.createObjectURL(this.result)
          var oImg=new Image();
          oImg.src=this.result;
          document.body.appendChild(oImg);
          oImg.onload=function(){
              var imgWidth=oImg.offsetWidth;
              var imgHeight=oImg.offsetHeight;
              imginfo.push(imgWidth) ;
              imginfo.push(imgHeight) ;
              document.body.removeChild(oImg);
          };
          
      };
      reader.readAsDataURL(oFile);
      this.ImgUrlUplate(file)
      // this.setState({
      //     files:this.state.files  
      // })
  }
};
 // 获取图片路径
 ImgUrlUplate = (file) =>{
  let formData = new FormData();
  formData.append('image', file);
  this.fetchNewAiService({ formData })
};
 // 获取图片路径
 ImgUrlUplate = (file) =>{
  let formData = new FormData();
  formData.append('image', file);
  this.fetchNewAiService({ formData })
};

fetchNewAiService = ({ formData }) => {
  const options = {
      method: 'POST',
      mode:'cors',
      headers: {
          'Authorization': window.localStorage.getItem("token"),
      },
  };
  fetch(`${BaseUrl}/api/v2/user/service/upload`, {
    ...options,
    body: formData,
  }).then(response => response.json()).then(result => {
    const { code, data } = result;
    console.log('result: ', result);
    if(code == 200) {
      message.success('图片上传成功！');
      this.setState({ 
        imgUrlUpload: result.data,
        sourceimg:result.data,
       })
    } else {
      message.error('上传图片失败！');
    }
  })
};
showXY =(source) =>{
  var img = document.getElementById("loc_img");
  img.src = source;
  alert("Width:"+img.width+", Height:"+img.height);
};
    render(){
        const columns = [
            {
                title: '序号',
                width:"5%",
                render:(text,record,index)=>
                    <div> {index + 1}</div>
            },
            {
                title: 'SKU名',
                dataIndex: 'name',
                align:"center",
                width:"30%",
            },
            {
                title: '品牌',
                dataIndex: 'brand',
            },
            {
                title: '数量',
                dataIndex: 'quantity',
            },
            {
                title: '百分比',
                render:(text,record,index)=>
                    <div> {Math.floor((record.quantity/this.state.skucoor.length) * 100)}%</div>
            },
        ];
        const modifyTable = [
            {
                title: 'SKU名称',
                dataIndex: 'name',
                key: 'name',
                width: 250,
                // render: text => <a href="javascript:;">{text}</a>,
            },
            {
                title: '品牌',
                dataIndex: 'brand',
                key: 'brand',
                width: 150,
            },
            {
                title: '图例',
                dataIndex: 'sku_img',
                key: 'sku_img',
                width: 100,
                render: text => <img style={{width:"20px"}}  src={text}></img>,
            },
        ];
        const {selectedRowKeys } = this.state;

        const rowSelection = {
            type:'radio',
            selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {

                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                this.setState({
                    select_sku_name:selectedRows[0].name,
                    select_sku_id:selectedRows[0].id,
                    selectedRowKeys:selectedRowKeys
                })
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User', // Column configuration not to be checked
                name: record.name,
            }),
        };

        var addArr = [['商品名*','818g巧媳妇黄豆酱'],['商品编号',2],['品牌','巧媳妇'],['包装类型','瓶装'],['是否本品','是'],['SKU品类','调味品'],['规格','500ml']];

        const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
        const uploadButton = (
            <div style={{ width:'500px',height:'600px',display:'flex',justifyContent:'center',alignItems:"center"}}>
                <Icon type={this.state.loading ? 'loading' : 'plus'} />
                <div className="ant-upload-text">点击上传图片</div>
            </div>
        );
        const imageUrl = this.state.imageUrl;
        return(
            <div style={{backgroundColor:"#fff",minHeight:800}}>
                {
                    this.props.TYPE == "验证" && this.state.onlineserve  == true ?
                        <div style={{display: 'flex', justifyContent: 'flex-start', width: "100%", padding: " 20px 10px"}}>
                            <div className="images-upload" style={{width: "30%"}}>
                                { 
                                    this.getImg()
                                }
                                {this.state.flags ?
                                    <Spin style={{position:'flex',top:'20%',left:'30%'}}/>
                                    :
                                    <div style={{width: "100%", display: "flex", justifyContent: 'center', padding: "20px"}}>
                                        {this.state.flags ?
                                            <div></div>
                                            :
                                            <Button onClick={this.detectImage}>开始识别</Button>
                                        }
                                    </div>
                                }
                            </div>

                        </div>
                        :
                        <div>
                            <div>
                                <div style={{
                                    flexDirection: 'column',
                                    fontSize: "14px",
                                    width: "60%",
                                    overflow: "hidden",
                                    float: "left",
                                    justifyContentL: 'center',
                                    alignItems: 'center'
                                }}>
                                    <div>
                                        <div style={{
                                            padding: "0 0 10px 0",
                                            display: "flex",
                                            justifyContent: 'center',
                                            height: "40px",
                                            lineHeight: "40px"
                                        }}>
                                            <div>
                                                <span style={{
                                                    fontSize: '16px',
                                                    padding: "5px"
                                                }}>图片序号：{this.props.imgnum}</span>
                                            </div>
                                            <div>
                                                <Radio.Group defaultValue="a" buttonStyle="solid"
                                                             onChange={this.changeImgType}>
                                                    <Radio.Button value="a" style={{
                                                        width: "80px",
                                                        textAlign: 'center',
                                                        borderRadius: "0"
                                                    }}> 原图 </Radio.Button>
                                                    <Radio.Button value="b" style={{
                                                        width: "80px",
                                                        textAlign: 'center',
                                                        borderRadius: "0"
                                                    }}>结果图</Radio.Button>
                                                </Radio.Group>
                                            </div>
                                            <div>
                                                <Button style={{
                                                    padding: "0",
                                                    width: "80px",
                                                    fontSize: "16px",
                                                    borderRadius: "0",
                                                    height: "30px"
                                                }} onClick={this.zoomIn}>+</Button>
                                                <Button style={{
                                                    padding: "0",
                                                    width: "80px",
                                                    fontSize: "16px",
                                                    borderRadius: "0",
                                                    height: "30px"
                                                }} onClick={this.zoomOut}>-</Button>
                                            </div>
                                            <div>
                                            </div>
                                        </div>
                                        <div style={{
                                            overflow: 'auto',
                                            height: '550px',
                                            position: 'relative',
                                            margin: '0 auto',
                                            border: "0.5px solid #ddd",
                                            margin: "20px",
                                            display: 'flex',
                                            alignItems: "center"
                                        }}>
                                            {this.state.sourceimg ?
                                                <div id='imgbox' style={{
                                                    position: 'relative',
                                                    minHeight: '500px',
                                                    minWidth: '400px',
                                                    height: this.state.imgHeight,
                                                    width: this.state.imgWidth,
                                                    margin: "0 auto",
                                                    display: "block"
                                                }}>
                                                    <img
                                                        useMap="#planetmap"
                                                        id='imgdisplay'
                                                        style={{
                                                            position: 'relative',
                                                            minHeight: '500px',
                                                            minWidth: '400px',
                                                            height: this.state.imgHeight,
                                                            width: this.state.imgWidth,
                                                            margin: "0 auto",
                                                            display: "block"
                                                        }}
                                                        src={this.state.imgType ? this.state.sourceimg : this.state.sourceimg}
                                                        alt="加载中"
                                                    />
                                                    <canvas id="canves"
                                                            style={{
                                                                display: this.state.is_canvas_,
                                                                position: 'absolute',
                                                                zIndex: '2000',
                                                                left: "0",
                                                                top: '0'
                                                            }}
                                                            onClick={this.state.is_canvas_ == "block" ? this.getposition.bind(this) : ''}>

                                                    </canvas>
                                                    <div
                                                        onClick={this.state.is_canvas_ == "block" ? this.getposition.bind(this) : ''}
                                                        style={{
                                                            display: this.state.is_canvas,
                                                            position: 'absolute',
                                                            zIndex: '20002',
                                                            left: "0",
                                                            top: '0',
                                                            minHeight: '500px',
                                                            minWidth: '400px',
                                                            height: this.state.imgHeight,
                                                            width: this.state.imgWidth,
                                                        }}>
                                                        {
                                                            this.state.mask == true ?
                                                                <div
                                                                    style={{
                                                                        zIndex: '99999',
                                                                        position: 'absolute',
                                                                        left: this.state.x_,
                                                                        top: this.state.y_,
                                                                        minWidth: '250px',
                                                                        minHeight: '10px',
                                                                        backgroundColor: 'rgba(255,255,255,0.7)'
                                                                    }}
                                                                >
                                                                    <span>{this.state.sku_search_name}{this.state.sku_dig}</span>
                                                                    <span onMouseEnter={this.handleMouseEnter}
                                                                          onMouseLeave={this.handleMouseLeave}
                                                                          onClick={this.sku_update.bind(this)} style={{
                                                                        color: 'green',
                                                                        marginLeft: '10px',
                                                                        cursor: 'pointer',
                                                                        textDecoration: 'underline'
                                                                    }}>修改</span>
                                                                </div>
                                                                : ""
                                                        }
                                                    </div>
                                                </div>
                                                :
                                                <div style={{
                                                    display: "flex",
                                                    justifyContent: "center",
                                                    alignItems: "center",
                                                    height: "540px",
                                                    width: "100%"
                                                }}>
                                                    <div>图片加载中</div>
                                                </div>
                                            }
                                        </div>
                                    </div>
                                </div>
                                <div style={{width: "40%", overflow: 'auto', float: "left"}}>
                                    <div className="card-container"
                                         style={{textAlign: 'center', width: "100%", height: "100%"}}>
                                        <Tabs defaultActiveKey="1">
                                            <TabPane tab="SKU比例分析" key="1">
                                                <div style={{
                                                    display: 'flex',
                                                    flexDirection: "column",
                                                    justifyContent: "flex-start"
                                                }}>
                                                    <div style={{
                                                        display: 'flex',
                                                        justifyContent: 'space-between',
                                                        width: '100%',
                                                        padding: "10px 0"
                                                    }}>
                                                        <div className="sku_infos">
                                                            <h7>SKU个数:{this.state.statistics}个</h7>
                                                        </div>
                                                        <div className="sku_infos">
                                                            <h7>SKU种类:{this.state.product != undefined && this.state.product.length > 0 ? this.state.product.length - 1 : ''}种</h7>
                                                        </div>
                                                        <div className="sku_infos">
                                                            <h7>货架层数 :{this.state.shelfnum}层</h7>
                                                        </div>
                                                        <div className="sku_infos">
                                                            <h7>已知SKU数:{this.state.statistics - this.state.unknown}个</h7>
                                                        </div>
                                                        <div className="sku_infos">
                                                            <h7>未知SKU数:{this.state.unknown}个</h7>
                                                        </div>
                                                    </div>
                                                    <Table pagination={false} rowSelection={{
                                                        onChange: this.onSelectChange,
                                                        onSelectAll: this.onSelectAll_
                                                    }} columns={columns} dataSource={this.state.product}
                                                           scroll={{y: 450}}/>
                                                </div>
                                            </TabPane>
                                            <TabPane tab="陈列达标分析" key="2">
                                                <div>
                                                    <Table dataSource={this.state.displayresult} pagination={false}
                                                           scroll={{height: '600'}}>
                                                        <Column
                                                            title="陈列规则"
                                                            dataIndex="name"
                                                            key="1"
                                                            width="30%"
                                                            align="left"
                                                        />
                                                        <Column
                                                            title="是否达标"
                                                            dataIndex="isget"
                                                            key="image"
                                                            align="center"
                                                            width="30%"
                                                        />
                                                        <Column
                                                            title="异常说明"
                                                            dataIndex="remark"
                                                            key="info3"
                                                            align="right"
                                                            width="40%"
                                                            render={
                                                                (record) => (
                                                                    record ?
                                                                        record.map(val => (
                                                                            <div> {val[0]}.{val[1]} </div>))
                                                                        :
                                                                        '---'
                                                                )
                                                            }
                                                        />
                                                    </Table>
                                                </div>
                                            </TabPane>
                                        </Tabs>
                                    </div>

                                </div>
                            </div>
                            <div>
                                <Modal
                                    visible={this.state.isModifiedModalVisible}
                                    wrapClassName={'addModifiedModal'}
                                    style={{zIndex: '999999'}}
                                    onCancel={this.handleCancel}
                                >
                                    <div className='ant-modal-header'>
                                        <div className='ant-modal-title'>请选择SKU信息</div>
                                        <div className='ant-modal-addNew' onClick={this.openAddNewSKUmodal}>+新增SKU</div>
                                    </div>
                                    <div style={{display: "flex", flexDirection: "row", padding: "20px"}}>
                                        <div style={{flex: "1.5", padding: '10px'}}>
                                            <img
                                                style={{
                                                    position: 'relative',
                                                    maxHeight: '150px',
                                                    maxWidth: '150px',
                                                    display: "block"
                                                }}
                                                src={this.state.result_base64_image ? this.state.result_base64_image : ""}
                                                alt="加载中"
                                            />

                                            <div style={{fontSize:'14px',color:'#4a4a4a',marginTop:'20px'}}>当前SKU结果为：</div>
                                            <div style={{fontSize:'14px',color:'#ccc'}}>{this.state.sku_search_name}</div>
                                            <div style={{fontSize:'14px',marginTop:'15px'}}>修改结果为：</div>
                                            <div style={{fontSize:'14px',color:'green'}}>{this.state.select_sku_name}</div>
                                        </div>
                                        <div style={{flex: "5", padding: '10px'}}>
                                            <Search
                                                placeholder="SKU名称"
                                                onSearch={this.searchSKU.bind(this)}
                                                style={{width: 200}}
                                            />
                                            <Table rowSelection={rowSelection} rowKey={record => record.id}
                                                   columns={modifyTable} dataSource={this.state.modifyData}/>
                                            <Pagination defaultPageSize={1} onChange={this.onChange_.bind(this)}
                                                        defaultCurrent={1}
                                                        total={this.state.total_sku == '0' ? '1' : Math.ceil(this.state.total_sku / 5)}/>
                                        </div>
                                    </div>
                                    <div className='ant-modal-footer'>
                                        <button className='modify-btn modify-btn-primary' onClick={this.handleOk}>确定
                                        </button>
                                        <button className='modify-btn' onClick={this.handleCancel}>取消</button>
                                    </div>
                                </Modal>
                                <Modal
                                    title='新增SKU信息'
                                    visible={this.state.isAddNewSKUvisible}
                                    wrapClassName={'addNewSKUModal'}
                                    onCancel={this.handleCancel2}
                                >
                                    <div style={{display: "flex", flexDirection: "row", padding: "20px"}}>
                                        <div style={{flex: "1", padding: '10px'}}>
                                            <img
                                                style={{
                                                    position: 'relative',
                                                    maxHeight: '150px',
                                                    maxWidth: '150px',
                                                    display: "block"
                                                }}
                                                src={this.state.result_base64_image ? this.state.result_base64_image : ""}
                                                alt="加载中"
                                            />
                                        </div>
                                        <div style={{flex: "3", padding: '10px'}}>
                                            <div>

                                                <div className='addNewSKU'>
                                                    <div className={'arrTitle'}>商品名称：</div>
                                                    <Input onChange={this.handleChangeName.bind(this)}
                                                           className={'arrInput'} placeholder="818G巧媳妇黄豆酱"/>
                                                </div>
                                                <div className='addNewSKU'>
                                                    <div className={'arrTitle'}>商品编号：</div>
                                                    <Input onChange={this.handleChangeNumber.bind(this)}
                                                           className={'arrInput'} placeholder="812131231231"/>
                                                </div>
                                                <div className='addNewSKU'>
                                                    <div className={'arrTitle'}>品牌：</div>
                                                    <Input onChange={this.handleChangeBrand.bind(this)}
                                                           className={'arrInput'} placeholder="巧媳妇"/>
                                                </div>
                                                <div className='addNewSKU'>
                                                    <div className={'arrTitle'}>包装类型：</div>
                                                    <Select defaultValue="瓶装" style={{width: '50%'}}
                                                            onChange={this.handleChangeShape}>
                                                        <Option value="瓶装">瓶装</Option>
                                                        <Option value="罐装">罐装</Option>
                                                        <Option value="桶装">桶装</Option>
                                                        <Option value="盒装">盒装</Option>
                                                        <Option value="袋装">袋装</Option>
                                                        <Option value="坛装">坛装</Option>
                                                        <Option value="杯装">杯装</Option>
                                                        <Option value="其他">其他</Option>
                                                    </Select>

                                                </div>
                                                <div className='addNewSKU'>
                                                    <div className={'arrTitle'}>是否本品：</div>
                                                    <Select defaultValue="是" style={{width: '50%'}}
                                                            onChange={this.handleChangeProduct}>
                                                        <Option value="true">是</Option>
                                                        <Option value="false">否</Option>
                                                    </Select>

                                                </div>
                                                <div className='addNewSKU'>
                                                    <div className={'arrTitle'}>SKU品类：</div>
                                                    <Select defaultValue="乳酸菌" style={{width: '50%'}}
                                                            onChange={this.handleChangeSkutype}>
                                                        <Option value="juice">果汁</Option>
                                                        <Option value="acidbacteria">乳酸菌</Option>
                                                        <Option value="cheese">优酪乳</Option>
                                                        <Option value="milk">牛奶</Option>
                                                        <Option value="coffee">咖啡</Option>
                                                    </Select>

                                                </div>
                                                <div className='addNewSKU'>
                                                    <div className={'arrTitle'}>规格：</div>
                                                    <Input onChange={this.handleChangeSpace} className={'arrInput'}
                                                           placeholder="12ml"/>
                                                </div>
                                                <div className='addNewSKU'>
                                                    <div className={'arrTitle'}>价格：</div>
                                                    <Input onChange={this.handleChangePrice} className={'arrInput'}
                                                           placeholder="12"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className='ant-modal-footer'>
                                        <button className='modify-btn modify-btn-primary'
                                                onClick={this.onAddNewSKU}>确定
                                        </button>
                                        <button className='modify-btn' onClick={this.handleCancel2}>取消</button>
                                    </div>
                                </Modal>
                                <Modal
                                    title="重复添加"
                                    visible={this.state.isRepeatSKUvisible}
                                    okText='加入该SKU库'
                                    cancelText='取消'
                                    onOk={this.handleOk3}
                                    onCancel={this.handleCancel3}
                                    wrapClassName={'repeatSKUmodal'}
                                >
                                    <div style={{textAlign: 'center', margin: '20px auto', fontSize: '16px'}}>商品名已存在！
                                    </div>
                                </Modal>
                            </div>

                            <div className='addingModal' style={{display: this.state.flag ? 'block' : 'none'}}>
                                <div className="spining-login">
                                    <Spin size="large" tip="正在加入SKU库" style={{paddingTop: '20px', fontSize: '12px'}}/>
                                </div>
                            </div>
                        </div>

                }


            </div>

        )
    }
}

export default AddBatch;
